<template>
  <div class="action-btn-wp">
    <el-button type="danger" size="small" @click.stop.prevent="openDialog()">拒绝维修</el-button>

    <el-dialog
        :visible.sync="dialogVisible"
        size="small"
        :close-on-click-modal="false"
    >
      <span slot="title" style="font-weight: bold;font-size: 16px;">拒绝维修</span>
      <div class="disagree-dialog-wp">
        <div class="form-item">
          <div class="form-label">请选择拒绝维修理由</div>
          <div class="form-cnt">
            <el-select v-model="reason" placeholder="请选择拒绝维修理由" style="width:100%;">
              <el-option label="不在保修范围内" value="不在保修范围内"></el-option>
              <el-option label="商品临近归还期" value="商品临近归还期"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">请输入详细理由</div>
          <div class="form-cnt">
            <el-input type="textarea" v-model="detail"></el-input>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">请上传图片凭证</div>
          <div class="form-cnt">
            <resource-manager type="cards" dir="evidence" :cards-num="5" :modal="false" @insert-success="insertImgsSuccess"></resource-manager>
          </div>
        </div>
      </div>
      <footer slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click.stop.prevent="disagreeRepair()" :loading="sending">拒绝维修</el-button>
      </footer>
    </el-dialog>

  </div>
</template>

<script>
  import ResourceManager from '@/components/ResourceManager';

  import {refuseRepair} from '@/api/afterService';
  import {osshost} from '@/api/util/fetch';
  import {showMessage} from '@/utils/message';

  export default {
    name: 'actionRepairDisagree', //拒绝维修
    components:{
      'resource-manager':ResourceManager,
    },
    props:{
      scope:{
        type:Object,
        default:()=>{},
      },
      scopeId:{
        type:String,
        default:'id'
      },
    },
    data()
    {
      return {
        dialogVisible:false,
        sending:false,
        reason:'', //拒绝维修选择的理由
        detail:'', //详细理由
        imageList:[
          /*{url:''}*/
        ],
      }
    },
    methods: {
      openDialog()
      {
         this.dialogVisible = true;
      },
      disagreeRepair()
      {
        if(!this.reason)
        {
          this.$message({
            message: '请选择拒绝维修理由',
            type: 'error',
            duration: 3000
          });

          return;
        }

        if(!this.detail)
        {
          this.$message({
            message: '请输入详细理由',
            type: 'error',
            duration: 3000
          });

          return;
        }

        if(!this.imageList || this.imageList.length <=0)
        {
          this.$message({
            message: '请至少上传一张图片凭证',
            type: 'error',
            duration: 3000
          });

          return;
        }

        this.$confirm('拒绝维修后蜜宝平台将介入,是否继续?', '拒绝维修?', {
          confirmButtonText: '拒绝维修',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          if(this.sending)
          {
            return;
          }

          this.sending = true;

          let data = {
            serviceOrderId:this.scope.row.id,
            refuseReason:this.reason, //拒绝理由
            refuseExplanation:this.detail, //说明
            refuseImgJson:this.imageList,
          };

          refuseRepair(data).then(resp=>{

            let rows = this.scope.rows;
            let index = this.scope.index;

            showMessage({title:'已拒绝维修!',type:'success'});

            this.dialogVisible = false;
            this.sending = false;
            this.reason = '';
            this.detail='';
            this.imageList=[];

            rows.splice(index,1);

            this.$emit('success');

            this.resetdata();

          }).catch(err=>{
            this.sending = false;
          });

        }).catch(() => {

        });
      },
      resetdata()
      {
        //重置输入
        this.reason='';
        this.detail='';
        this.imageList=[];
      },
      insertImgsSuccess(files)
      {
        this.imageList = files;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../styles/mixin";

  .disagree-dialog-wp
  {
    .form-item
    {
      margin-bottom: 15px;

      .form-label
      {
        padding-bottom: 5px;
      }

      .form-cnt
      {

      }
    }
  }
</style>